//商品列表
'use strict';

import {
    StyleSheet,
    ListView,
    Text,
    Image,
    View,
    AlertIOS,
    ActivityIndicator,
    TouchableOpacity
} from 'react-native';
import React from 'react';
import URL from '../config/server';


export default class ItemList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
            loaded: false,
            showNum: 10
        };
    }

    componentDidMount() {
        this._MainisUnmounted = false;
        this.fetchData();
    }

    componentWillReceiveProps() {
        //logo先显示
        this.setState({
            loaded: false
        });
        //拉取数据
        this.fetchData();
    }

    componentWillUnmount() {
        this._MainisUnmounted = true;
    }

    //拉取数据
    fetchData() {
        const API_URL = URL.local + 'note/';
        let PARAMS = 1 + '/1/'+this.state.showNum;
        const REQUEST_URL = API_URL + PARAMS;
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                if (!this._MainisUnmounted) {
                    this.setState({
                        loaded: true,
                        dataSource: this.state.dataSource.cloneWithRows(responseData)
                    })
                }
            }).catch(function (e) {
                AlertIOS.alert(
                    '温馨提示',
                    '网络连接错误，请关闭飞行模式或检查您的网络连接。'
                )
            })
            .done();
    }


    //渲染列表
    renderListView() {
        //先展示加载中的菊花
        if (!this.state.loaded) {
            return (
                <ActivityIndicator
                    style={[styles.centering,{height: 40}]}
                    color="#a1a2a1"
                />
            );
        }
        return (
            <ListView
                initialListSize={this.state.showNum}
                dataSource={this.state.dataSource}
                renderRow={this.renderRow.bind(this)}
                style={styles.listView}/>
        );
    }

    toContent(id) {
        this.props.navigator.push({
            id: 'Content',
            message: {
                mid: id,
                mtype: 0
            }
        });
    }

    //渲染每一行
    renderRow(item) {
        return (
            <TouchableOpacity onPress={()=>{this.toContent(item.id)}}>
                <View style={styles.itemContainer}>
                    <Text style={styles.Tuiguang}>
                        推广
                    </Text>
                    <Text style={styles.goodTit}>{item.title.length>15?item.title.slice(0,13)+'...':item.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        return (
            this.renderListView()
        );
    }
}

const styles = StyleSheet.create({
    loading: {
        marginTop: 10,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        height: 40,
        resizeMode: Image.resizeMode.contain
    },
    centering: {
        flex: 1,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center'
    },
    listView: {
        backgroundColor: '#ffffff'
    },
    itemContainer: {
        flex: 1,
        padding: 5,
        flexDirection: 'row',
        borderBottomColor: '#eeeeee',
        borderBottomWidth: 1,
        backgroundColor: '#ffffff'
    },
    //左侧推广图标
    Tuiguang: {
        fontSize: 13,
        borderWidth: 1,
        borderColor: '#e02820',
        color: '#e02820',
        textAlign: 'center',
        paddingTop: 6,
        borderRadius: 5,
        width: 40,
        height: 25,
        marginLeft: 5,
        marginRight: 10,
        alignSelf: 'center'
    },
    //右侧商品信息
    goodInfo: {
        flex: 1
    },
    goodTit: {
        flex: 1,
        fontSize: 16,
        fontWeight: '600',
        color: '#000000',
        textAlign: 'left',
        alignSelf: 'center'
    }
});
